<template>
    <div style="height: 100%">
      <div class="main-tab">
        <x-header id="header" :left-options="{showBack: false}" title="烟酒论坛" slot="header"></x-header>
        <div class="search">
          <search
            @result-click="resultClick"
            @on-change="getResult"
            :results="results"
            v-model="value"
            position="absolute"
            auto-scroll-to-top
            top="46px"
            @on-focus="onFocus"
            @on-cancel="onCancel"
            @on-submit="onSubmit">
          </search>
        </div>
        <swiper auto style="width:100%" height="14.16rem" dots-class="custom-bottom" dots-position="center" >
          <swiper-item class="swiper-demo-img" v-for="(item, index) in sliderList" :key="index">
            <img :src="item.imgUrl" class="slider">
          </swiper-item>
        </swiper>
        <group gutter="0">
          <flexbox>
            <flexbox-item><div class="ico" @click="information"><img src="../../../static/icon/home-nav/1.png"><span>资讯</span></div></flexbox-item>
            <flexbox-item><div class="ico"><img src="../../../static/icon/home-nav/2.png"><span>名烟</span></div></flexbox-item>
            <flexbox-item><div class="ico"><img src="../../../static/icon/home-nav/3.png"><span>名酒</span></div></flexbox-item>
            <flexbox-item><div class="ico"><img src="../../../static/icon/home-nav/4.png"><span>电烟</span></div></flexbox-item>
            <flexbox-item><div class="ico"><img src="../../../static/icon/home-nav/5.png"><span>真伪</span></div></flexbox-item>
          </flexbox>
          <flexbox>
            <flexbox-item><div class="ico" @click="rank"><img src="../../../static/icon/home-nav/6.png"><span>排行</span></div></flexbox-item>
            <flexbox-item><div class="ico"><img src="../../../static/icon/home-nav/7.png"><span>测评</span></div></flexbox-item>
            <flexbox-item><div class="ico" @click="service"><img src="../../../static/icon/home-nav/8.png"><span>服务</span></div></flexbox-item>
            <flexbox-item><div class="ico" @click="business"><img src="../../../static/icon/home-nav/9.png"><span>零售</span></div></flexbox-item>
            <flexbox-item><div class="ico" @click="knock_out"><img src="../../../static/icon/home-nav/10.png"><span>爆料</span></div></flexbox-item>
          </flexbox>
          <cell class="msg" value-align="left">
            <span slot="title" style="font-size: 18px;color: #4A90E2;letter-spacing: 0;text-align: center;width: 3.14rem;height: 1.71rem">消息</span>
            <div class="banner">
              <div class="banner-title"><span>促销</span></div>
              <div class="banner-txt">
                <swiper auto height="30px" direction="horizontal" :interval=2000 class="text-scroll" :show-dots="false" >
                  <swiper-item v-for="(item,index) in msgList" :key="index"><p> {{item.content}}</p></swiper-item>
                </swiper>
              </div>
            </div>
          </cell>
          <div class="movieOrpic" v-for="(item,index) in inforlist" :for="item.id">
            <div class="movie" v-if="item.mediaType === 2">
              <video :src="item.videoSrc" controls="controls" class="video"></video>
              <div class="msg-main">
                <div class="msg-tit"><span>{{item.content}}</span></div>
                <div class="msg-bottom">
                  <span class="comment"><span class="num">{{item.commentCount}}</span>条评论</span>
                  <span class="play"><span class="num">{{item.readCount}}</span>次播放</span>
                </div>
              </div>
            </div>
            <div class="pic" v-if="item.mediaType === 1">
              <img :src="item.pictureArray" class="video">
              <div class="msg-main">
                <div class="msg-tit"><span>{{item.content}}</span></div>
                <div class="msg-bottom">
                  <span class="comment"><span class="num">{{item.commentCount}}</span>条评论</span>
                  <span class="play"><span class="num">{{item.readCount}}</span>次阅读</span>
                </div>
              </div>
            </div>
          </div>
        </group>
      </div>
      <b-tabbar :value="0" />
    </div>
</template>

<script>
  import { Search,Flexbox, FlexboxItem } from 'vux'
  import bTabbar from '../../components/Btabbar'
  import { getSliderList,getMsgList,getartTitle} from '@/api/home'
  import axios from 'axios'
    export default {
        name: "home",
      components:{
          bTabbar,
          Search,
          Flexbox,
          FlexboxItem
      },
      data(){
          return{
            sliderList:[
              {
                type: Array,
                default: () => ([])
              }
            ],
            msgList:[
              {
                type: Array,
                default: () => ([])
              }
            ],
            inforlist:[
            ]
          }
      },
      methods:{
          information(){
            this.$router.push({
              name:'information'
            })
          },
        rank(){
          this.$router.push({
            name:'rank'
          })
        },
        service(){
            this.$router.push({
              name:'service'
            })
        },
        business(){
            this.$router.push({
              name:'business'
            })
        },
        knock_out(){
            this.$router.push({
              name:'knock_out'
            })
        },
        // 获取轮播图列表
        getSliderList() {
          getSliderList({}).then(res => {
            console.log(res)
            this.sliderList = res.data
            console.log(this.sliderList)
          })
        },
        //获取平台消息
        getMsgList(){
          getMsgList({}).then(res => {
            console.log(res)
              this.msgList =res.data
              console.log(this.msgList)
          })
        },
        //获取首页资讯类文章列表
        getArtList(){
          getartTitle({}).then(res => {
            console.log(res)
            this.inforlist = res.data
            console.log(this.inforlist)
          })
        },
      },
      created(){
          this.getSliderList();
          this.getMsgList();
          this.getArtList();
      }
    }
</script>

<style scoped>
  #header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .search{
    padding-top: 44.5px;
  }
  .ico{
    display: flex;
    flex-direction: column;
  }
  .ico img{
    width: 3.21rem;
    height: 3.21rem;
    margin-left: 1.07rem;
    margin-top: 1.48rem;
    margin-right: 1.08rem;
  }
  .ico span{
    font-size: 12px;
    color: #5B5B5B;
    letter-spacing: 0;
    /*text-align: center;*/
    margin-top: 0.36rem;
    margin-left: 1.81rem;
  }
  .msg{
    background: #FFFFFF;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.02), 0 2px 4px 0 rgba(173,37,50,0.05);
    display: flex;
    flex-direction: row;
    margin-top: 1.43rem;
  }
  .banner{
    display: flex;
    flex-direction: row;
    margin-left: 1.86rem;
  }
  .banner-title{
    width: 2.5rem;
    height: 1.29rem;
    border: 1px solid #AD2532;
    border-radius: 0.142rem;
    font-size: 12px;
    color: #AD2532;
    letter-spacing: 0;
    text-align: center;
  }
  .text-scroll{
    margin-left: 0.72rem;
    width: 16.43rem;
    height: 1.43rem;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: justify;
  }
  .text-scroll p{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .banner-txt{
    width: 61.3%;
  }
  .msg-main{
    background: #F5F5F5;
    border-radius: 2px;
    margin-left: 1.07rem;
    margin-right: 1.07rem;
    margin-top: 6.71rem;
  }
  .video{
    position: absolute;
    /*width: 22.5rem;*/
    width: 84%;
    height: 12.86rem;
    background: rgba(0,0,0,0.40);
    border-radius: 5px;
    margin-left: 2.14rem;
    margin-top: -4.19rem;
  }
  .msg-tit{
    margin-left: 1.07rem;
    /*margin-top: 1.07rem;*/
    padding-top: 9.29rem;
    font-size: 18px;
    color: #030303;
    letter-spacing: -0.43px;
    text-align: justify;
  }
  .msg-bottom{
    margin-left: 1.07rem;
    margin-top: 0.71rem;
    padding-bottom: 1.08rem;
    display: flex;
    justify-content: space-between;
  }
  .comment{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: -0.29px;
    text-align: justify;
  }
  .num{
    font-size: 12px;
    color: #030303;
    letter-spacing: -0.29px;
    text-align: justify;
    margin-right: 0.36rem;
  }
  .play{
    font-size: 12px;
    color: #9B9B9B;
    letter-spacing: -0.29px;
    text-align: justify;
    margin-right: 1.07rem;
  }
  .slider{
    width: 100%;
    height: 14.16rem;
  }
</style>
